<template>
  <div>
  <div>
    <head-vue></head-vue>
  </div>
  <div style="border-right: 1px solid #f0f0f0;width: 10%;height:93.5%;position:fixed;left: 0;top: 3.74rem;" >


    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item  title=" 通用设置 " name="1"  class="han">

        <div id="menu-1" class="m-active" @click="menu1()">
          <i class="bi bi-gear ml-4 h6"></i> 基础设置
        </div>
        <div id="menu-2" class="" @click="menu2()">
          <i class="bi bi-calendar2-minus ml-4"></i> 公告管理
        </div>

      </el-collapse-item>

    </el-collapse>
  </div>
  <BasicSettings id="BasicSettings" ></BasicSettings>
  <NoticeSettings id="NoticeSettings" v-show="flag2"></NoticeSettings>
  </div>

</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        activeNames: ['1'],
        flag:false,
        flag2:false,
        flag3:false
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      menu1(){
        $("#menu-1").attr("class","m-active")
        $("#menu-2").attr("class"," ")
        $("#menu-3").attr("class"," ")
        $("#menu-4").attr("class"," ")
        $("#BasicSettings").fadeIn(300)
        $("#NoticeSettings").hide()
        $("#GoodsExtend").hide()
        $("#GoodsAttribute").hide()
      },
      menu2(){
        $("#menu-1").attr("class"," ")
        $("#menu-3").attr("class"," ")
        $("#menu-4").attr("class"," ")
        $("#menu-2").attr("class","m-active")
        $("#NoticeSettings").fadeIn(300)
        $("#BasicSettings").hide()
        $("#GoodsExtend").hide()
        $("#GoodsAttribute").hide()
        this.flag = true;

      },
      menu3(){
        $("#menu-1").attr("class"," ")
        $("#menu-2").attr("class"," ")
        $("#menu-4").attr("class"," ")
        $("#menu-3").attr("class","m-active")
        $("#GoodsExtend").fadeIn(300)
        $("#ProductList").hide()
        $("#GoodsType").hide()
        $("#GoodsAttribute").hide()
        this.flag2 = true;

      },
      menu4(){
        $("#menu-1").attr("class"," ")
        $("#menu-2").attr("class"," ")
        $("#menu-3").attr("class"," ")
        $("#menu-4").attr("class","m-active")
        $("#GoodsAttribute").fadeIn(300)
        $("#ProductList").hide()
        $("#GoodsType").hide()
        $("#GoodsExtend").hide()
        this.flag3 = true;

      }
    }

  }
</script>

<style scoped>
.han div{
  height: 3rem;
  line-height: 2.9rem;
}
li{
  list-style: none;
  /*background-color: #F0FAFF;*/
  cursor: pointer;
  height: 3rem;
  line-height: 2.9rem;
}
ul{
  padding: 0;
}
.m-active{
  background-color: #F0FAFF;
  border-right: 2px solid #2D8CF0;
}
</style>
